<!-- Conic Launcher -->
<!-- Copyright 2022-2026 Broken-Deer and contributors. All rights reserved. -->
<!-- SPDX-License-Identifier: GPL-3.0-only -->

<template>
  <div class="worlds">
    <div class="world-list">
      <list-item
        v-for="(world, index) in saves"
        :key="index"
        :title="world.levelData.LevelName"
        :logo="world.icon"
        :click-able="false"
        :buttons="['circle-info', 'folders', 'arrow-up-right-from-square']">
        <template #subtitle>
          <tag
            :text="world.levelData.Version.Name"
            :color="['180', '180', '180']"
            text-color="#fffffff0"
            :border="true"
            :round="true"></tag>
          <tag
            v-if="world.levelData.allowCommands"
            :text="$t('game.saves.allowCheat')"
            :color="['180', '180', '180']"
            text-color="#fffffff0"
            :border="true"
            :round="true"></tag>
          <tag
            v-if="world.levelData.hardcore"
            :text="$t('game.saves.hardcore')"
            :color="['180', '180', '180']"
            text-color="#fffffff0"
            :border="true"
            :round="true"></tag>
        </template>
        {{ world.folderName }}
      </list-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import ListItem from "@/components/ListItem.vue";
import Tag from "@/components/Tag.vue";
import { useInstanceStore } from "@/store/instance";
import { ref, watch } from "vue";

// TODO: move this to @conic/game_data
type Save = {
  icon: string;
  // eslint-disable-next-line
  levelData: any;
  folderName: string;
};

const instanceStore = useInstanceStore();

const saves = ref<Save[]>([]);

watch(
  instanceStore.currentInstance,
  () => {
    // TODO: scan saves folder
  },
  {
    immediate: true,
  },
);
</script>

<style lang="less" scoped>
.worlds {
  .world-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: var(--list-border-radius);
    overflow: hidden;
  }
}
</style>
